<template>
  <view class="main-box">
    <view class="title-box">
      <text class="lText">账号登录</text>
      <view class="rigth-title-box">
        <text class="rText">手机号登录</text>
        <u-icon name="play-right-fill" color="#EF4F3F" size="10" style="position: relative; right: -16rpx;"></u-icon>
      </view>
    </view>
    <u--form :model="form" ref="uForm">
      <u-form-item prop="name"><u-input v-model="form.name" class="input-form" border placeholder="请输入账号" clearable /></u-form-item>
      <u-form-item prop="password" class="pwdBox">
        <u-input v-model="form.password" class="input-form" placeholder="请输入密码" border :type="eyeShow ? 'text' : 'password'" clearable password-icon></u-input>
        <view class="eyebox" @click="eyeShowFn">
          <image v-if="eyeShow" src="/static/openeye.png" mode="widthFix"></image>
          <image v-else src="/static/closeeye.png" mode="widthFix"></image>
        </view>
      </u-form-item>
      <u-button @click="onLogin" shape="circle" class="login-btn" type="error">登录</u-button>
    </u--form>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      form: {
        name: 'hdsj001',
        password: '123456'
      },
      rules: {
        name: [
          {
            required: true,
            min: 6,
            message: '账号输入有误! 请重新输入', // 可以单个或者同时写两个触发验证方式
            trigger: ['blur']
          }
        ],
        password: [
          {
            required: true,
            min: 6,
            message: '密码输入有误! 请重新输入',
            trigger: ['change', 'blur']
          }
        ]
      },
      eyeShow: false
    };
  },
  created() {},
  mounted() {},
  onLoad() {},
  methods: {
    eyeShowFn() {
      this.eyeShow = !this.eyeShow;
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    async onLogin() {
      let { data } = await uni.$http.post('/login/account', {
        account: this.form.name,
        password: this.form.password
      });
      if (data.code >= 200 && data.code < 300) {
        uni.setStorageSync('token',data.data)
        this.$refs.uToast.show({
          message: '登录成功',
          type: 'success',
          position: 'bottom',
          complete() {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }
        })
      }else{
        this.$refs.uToast.show({
          message:'用户名或密码错误',
          type: 'error',
          position: 'bottom'
        })
      }
    }
  }
};
</script>

<style lang="scss">
.main-box {
  margin: 66rpx;

  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 80rpx;

    .lText {
      height: 66rpx;
      font-weight: 600;
      font-size: 48rpx;
      color: #2a2929;
      letter-spacing: 0;
    }

    .rigth-title-box {
      display: flex;
      vertical-align: middle;
      justify-content: center;
      align-items: center;
    }
    .rText {
      height: 44rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #ef4f3f;
      letter-spacing: 0;
      text-align: right;
    }
  }
  .input-form {
    border: none;
    border-bottom: 2rpx solid #f9f9f9;
    /* #ifdef MP-WEIXIN */
    margin-bottom: 20rpx;
    /* #endif */
  }
  .login-btn {
    background-color: #ef4f3f;
    margin-top: 100rpx;
  }
}

::v-deep .u-form-item__body__right__message {
  margin-left: 24rpx !important;
}

.pwdBox {
  position: relative;
}
.eyebox {
  width: 32rpx;
  height: 32rpx;
  /* #ifdef MP-WEIXIN */
  position: absolute;
  top: 364rpx;
  right: 40rpx;
  /* #endif */

  image {
    width: 100%;
    height: 100%;
  }
}
</style>
